<template>
	<view class="content">
    <view class="upload-v">
      <view class="tlt">
        <view class="left">上传文档 <text>支持 <span v-for="(item, index) in showFormats" :key="index">{{ item }}{{ index < showFormats.length-1 ? '、' : '' }}</span></text> </view>
      </view>
      <view class="line"></view>
      <view class="upload-tlt">
        <view>文档</view>
        <view class="right">
          <lsj-upload
            v-if="!fileObj.fileName"
            ref="lsjUpload0"
            childId="upload1"
            :option="option"
            :size="size"
            :count="count"
            :height="height"
            :formats="formats"
            :debug="debug"
            :instantly="instantly"
            @change="onChange"
            @progress="onprogress"
            @uploadEnd="onuploadEnd"
            >
            <view v-if="progress!=0&&progress!=100">正在上传{{progress}}%</view>
            <view v-else>请选择</view>
          </lsj-upload>
          <text v-if="fileObj.fileName" class="file-pdf">{{fileObj.fileName}}</text>
          <text style="margin-left: 10rpx"><ve-icon name="arrow_right_0" size="32" /></text>
        </view>
      </view>
    </view>
    <view class="buttons">
      <view class="button" @click="okBack">确认</view>
    </view>
	</view>
</template>

<script>
import { userStore } from '@/stores'
import { getOpenUrl } from '@/utils/upload-tool'
export default {
	data() {
		return {
			// 上传接口参数
			option: {
				// 上传服务器地址，需要替换为你的接口地址
				url: getApp().globalData.requestUrl + '/uploadFile/commonUpload', // 该地址非真实路径，需替换为你项目自己的接口地址
				// 上传附件的key
				name: 'files',
				// 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
				header: {
					// 示例参数可删除
					'service-code': 'H5',
					ticket: '',
				},
				// 根据你接口需求自定义body参数
				formData: {
					// 'orderId': 1000
				}
			},
			// 选择文件后是否立即自动上传，true=选择后立即上传
			instantly: true,
			// 必传宽高且宽高应与slot宽高保持一致
			width: '600rpx',
			height: '36rpx',
			// 限制允许上传的格式，空串=不限制，默认为空
			// formats: "'pdf', 'word', 'txt'",
			formats: "",
			// 文件上传大小限制
			size: 30,
			// 文件数量限制
			count: 1,
			// 是否多选
			multiple: false,
			// 文件回显列表
			files: new Map(),
			// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
			wxFiles: [],
			// 是否打印日志
			debug: true,


			// 演示用
			tabIndex: 0,
			list:[],
      fileObj: {}, //上传完成的单个文件集
      progress: 0, //上传进度
      fileIndex: undefined,

      showFormats: [],
		}
	},
  created() {
    const userInfoStore = userStore()
    console.log(userInfoStore.profile?.ticket)
    this.option.header.ticket = userInfoStore.profile?.ticket
    this.option.header.ticket = userInfoStore.profile?.ticket
  },
  onLoad(options) {
    this.fileIndex = options.fileIndex
    this.formats = options.fileTypes.substring(1, options.fileTypes.length-1)
    this.showFormats = JSON.parse(options.fileTypes)
    console.log(this.showFormats)
  },
	onReady() {
		setTimeout(()=>{
			this.onTab();
		},2000)
	},
	methods: {
    text1(text){
      return text.substring(1, text.length-1)
    },
    // 确认
    okBack(){
      if(this.progress != 100){
        return false
      }
      uni.navigateBack()
      // this.fileObj
      this.fileObj.fileIndex = this.fileIndex
      uni.$emit('getFileObj', this.fileObj)
    },
		// 某文件上传结束回调(成功失败都回调)
		onuploadEnd(item) {
			// console.log(`${item.name}已上传结束，上传状态=${item.type}`);

			// 更新当前窗口状态变化的文件
			this.files.set(item.name,item);

			// ---可删除--演示上传完成后取服务端数据
			if (item['responseText']) {
				// console.log('演示服务器返回的字符串JSON转Object对象');
				// this.files.get(item.name).responseText = JSON.parse(item.responseText);
        if(this.files.get(item.name).type == 'success'){
          var responseText = JSON.parse(this.files.get(item.name).responseText).result[0]
          // console.log(responseText)
          // console.log('文件id：', responseText.fileIdStr)
          // console.log('文件名称：', responseText.fileName)
          // console.log('文件线上路径：', responseText.openUrl)
          this.fileObj = {
            fileIdStr: responseText.fileIdStr,
            fileName: responseText.fileName,
            openUrl: getOpenUrl(responseText)
          }
          // console.log(JSON.stringify(this.fileObj))

        }
			}

			// 微信小程序Map对象for循环不显示，所以转成普通数组，
			// 如果你用不惯Map对象，也可以像这样转普通数组，组件使用Map主要是避免反复文件去重操作
			// #ifdef MP-WEIXIN
			this.wxFiles = [...this.files.values()];
			// #endif

			// 强制更新视图
			this.$forceUpdate();


			// ---可删除--演示判断是否所有文件均已上传成功
			let isAll = [...this.files.values()].find(item=>item.type!=='success');
			if (!isAll) {
				console.log('已全部上传完毕');
			}
			else {
				console.log(isAll.name+'待上传');
        uni.showToast({
          title: '上传失败',
          icon: 'none'
        })
			}

		},
		// 上传进度回调
		onprogress(item) {
			// 更新当前状态变化的文件
			this.files.set(item.name,item);

			// console.log('打印对象',JSON.stringify(this.files.get(item.name)));
			// console.log('打印对象',this.files.get(item.name).progress);
			// console.log('打印对象',this.files.get(item.name));
      this.progress = this.files.get(item.name).progress;

			// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
			// #ifdef MP-WEIXIN
			this.wxFiles = [...this.files.values()];
			// #endif

			// 强制更新视图
			this.$forceUpdate();

		},
		// 文件选择回调
		onChange(files) {
      let isAll = [...this.files.values()].find(item=>item.type!=='success');
      if (!isAll) {
      	console.log('已全部上传完毕');
        return false
      }
      console.log('files', files)
			console.log('当前选择的文件列表：',JSON.stringify([...files.values()]));
      // 开始上传时,清空原list
			this.files = undefined;
      this.progress = 0;
      this.fileObj = {};
			// 更新选择的文件
			this.files = files;

			// 强制更新视图
			this.$forceUpdate();

			// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
			// #ifdef MP-WEIXIN
			this.wxFiles = [...this.files.values()];
			// #endif

			// ---可删除--演示重新定位覆盖层控件
			this.$nextTick(()=>{
				// console.log('演示重新定位');
				this.$refs.lsjUpload0.show();
			});

		},
		// 手动上传
		upload() {
			// name=指定文件名，不指定则上传所有type等于waiting和fail的文件
			// this.$refs['lsjUpload'+this.tabIndex].upload();
      console.log(this.$refs.lsjUpload0)
      this.$refs.lsjUpload0.upload()
		},
		// 指定上传某个文件
		resetUpload(name) {
			this.$refs['lsjUpload'+this.tabIndex].upload(name);
		},
		// 移除某个文件
		clear(name) {
			// name=指定文件名，不传name默认移除所有文件
			this.$refs['lsjUpload'+this.tabIndex].clear(name);
		},
		/**
		 * ---可删除--演示在组件上方添加新内容DOM变化
		 * DOM重排演示，重排后组件内部updated默认会触发show方法,若特殊情况未能触发updated也可以手动调用一次show()
		 * 什么是DOM重排？自行百度去
		 */
		add() {
			this.list.push('DOM重排测试');
			// App端如在自定义组件内使用则需要页面插入新内容后调用show()来重新定位
			// this.$nextTick(()=>{
			// 	this.$refs['lsjUpload'+this.tabIndex].show();
			// })
		},
		/**
		 * ---可删除--演示Tab切换时覆盖层是否能被点击
		 * APP端因为是webview，层级比view高，此时若不希望点击触发选择文件，需要手动调用hide()
		 * 手动调用hide后，需要调用show()才能恢复覆盖层的点击
		 */
		onTab() {
			this.$refs.lsjUpload0.hide();

			this.$nextTick(()=>{
				this.$refs['lsjUpload0'].show();
			})

		},
	}
}
</script>

<style lang="scss" scoped>

  .content {
  	background-color: #F7F8FA;padding: 24rpx;height: 100vh;
  }
  .upload-v{
    background-color: #ffffff;border-radius: 8rpx;padding: 0 24rpx;
    .tlt{
      display: flex;justify-content: flex-start;align-items: center;height: 110rpx;
      .left{
        color: #191C27;font-size: 32rpx;font-weight: 600;
        text{
          margin-left: 24rpx;color: #9EA5BB;font-size: 26rpx;font-weight: 400;
        }
      }
    }
    .line{
      width: 100%;height: 2rpx;background-color: rgba(216, 216, 216, 0.3);transform: scaleY(0.5);
    }
    .upload-tlt{
      display: flex;justify-content: space-between;align-items: center;font-size: 30rpx;color: #191C27;height: 110rpx;
      .right{
        display: flex;justify-content: flex-end;align-items: center;color: #9EA5BB;
        .file-pdf{
          color: #1890FF;
        }
      }
    }
  }

  .buttons{
    height: 200rpx;width: 100%;background-color: #ffffff;position: fixed;bottom: 0;left: 0;
    .button{
      width: calc(100% - 48rpx);height: 88rpx;margin: 32rpx 24rpx;background-color: #3072F6;color: #ffffff;border-radius: 4rpx;font-size: 32rpx;text-align: center;line-height: 88rpx;
    }
  }
</style>
